<template>
	<view class="root-wrap index">
		<view class="banner-wrap"><image class="img" src="../../static/assets/imgs/home-header-banner.png" alt=""></view>
		<view class="content-wrap">
			<view class="enter-wrap">
				<view class="enter-item" @click="onLogin">
					<image class="bg" src="../../static/assets/imgs/home-btn-bg-01.png"></image>
					<text class="title">供应商注册</text>
					<image class="btn" src="../../static/assets/imgs/index-icon-right.png"></image>
				</view>
				<view class="enter-item" @click="goPrograms">
					<image class="bg" src="../../static/assets/imgs/home-btn-bg-02.png"></image>
					<text class="title">项目广场</text>
					<image class="btn" src="../../static/assets/imgs/index-icon-right.png"></image>
				</view>
			</view>
			<u-tabs 
				:current="navIndex" 
				:list="navList" 
				@click="clickNav" 
				lineWidth="100rpx" 
				lineHeight="8rpx"
				lineColor="#30D6C2"
				:activeStyle="{
					color: '#303133',
					fontSize: '32rpx',
				}"
				:inactiveStyle="{
					color: '#303133',
					fontSize: '32rpx',
				}"></u-tabs>
			<view v-if="navIndex==0" class="tab-content">
				<view class="steps-wrap">
					<view class="step-item">
						<view class="num">1</view>
						<text class="title">注册完善供应商信息</text>
					</view>
					<view class="step-arrow"><u-icon name="arrow-down" color="#C0C4CC"></u-icon></view>
					<view class="step-item">
						<view class="num">2</view>
						<text class="title">参与报价（报价期）</text>
					</view>
					<view class="step-arrow"><u-icon name="arrow-down" color="#C0C4CC"></u-icon></view>
					<view class="step-item">
						<view class="num">3</view>
						<text class="title">选择供应商（评选期）</text>
					</view>
					<view class="step-arrow"><u-icon name="arrow-down" color="#C0C4CC"></u-icon></view>
					<view class="step-item">
						<view class="num">4</view>
						<text class="title">公布结果</text>
					</view>
					<view class="step-arrow"><u-icon name="arrow-down" color="#C0C4CC"></u-icon></view>
					<view class="step-item">
						<view class="num">5</view>
						<text class="title">和甲方签订合同</text>
					</view>
				</view>
			</view>
			<view v-else class="tab-content">
				<view class="desc"><rich-text :nodes="introContent"></rich-text></view>
			</view>
		</view>
		<my-tabbar :act="0"></my-tabbar>
	</view>
</template>

<script>
	import {userLoginApi,getMiscInfo} from '@/api/user.js';
	import myTabbar from '@/components/myTabbar.vue';
	export default {
		components: {
			myTabbar
		},
		data() {
			return {
				navList:[
					{name:'投标流程'},
					{name:'海信探索中心简介'}
				],
				navIndex: 0,
				isLogin: false,
				introContent:''
			}
		},
		onLoad(){
			getMiscInfo().then((res)=>{
				const nodeStr = res.data.introcontent.replace('<img','<img style="width:100%;max-width="702rpx;"')
				this.introContent = nodeStr;
			})
		},
		onShareAppMessage() {
		    return {
		      title: 'HSC报修比价', // 分享标题
		      path: '/pages/index/index', // 分享路径，必须是已经定义过的页面路径
		      success: function () {
		        // 分享成功回调
				uni.showToast({
					title: '分享成功',
					icon: 'none'
				})
		      },
		      fail: function () {
		        // 分享失败回调
		      }
		    };
		},
		onShareTimeline() {
			return {
				title: 'HSC报修比价', // 分享标题
				path: '/pages/index/index', // 分享路径，必须是已经定义过的页面路径
				success: function () {
				  // 分享成功回调
				  uni.showToast({
				  	title: '分享成功',
					icon: 'none'
				  })
				},
				fail: function () {
				  // 分享失败回调
				}
			};
		},
		methods: {
			onLogin(){
				if(!this.vuex_has_login){
					uni.login({
						provider: 'weixin',
						success: (res) => {
							this.code = res.code //  把code进行暂存
							userLoginApi({
								code: res.code
							}).then(res => {
								if(res.code==2){
									// 未注册用户
									this.isLogin = false;
									uni.navigateTo({
										url:'/pages/my/sign/index'
									})
								}else if(res.code==1){
									// 已注册用户
									this.isLogin = true;
									this.vuex_login(res);
									uni.switchTab({
										url: "/pages/my/index"
									})
								}
							})
						},
						fail: (err) => {
							console.log(err);
						},
					})
				}else{
					uni.switchTab({
						url: "/pages/my/index"
					})
				}
			},
			clickNav(e){
				this.navIndex = e.index;
			},
			goPrograms(){
				uni.navigateTo({
					url:'/pages/program/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.root-wrap {
		.banner-wrap {
			width: 100%;
			height: 480rpx;
			overflow: hidden;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		
		.content-wrap{
			box-sizing: border-box;
			position: relative;
			top: -74rpx;
			z-index: 1;
			width: 100%;
			padding: 34rpx 0;
			background-color: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			.enter-wrap{
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 36rpx;
				padding: 0 24rpx;
				.enter-item{
					position: relative;
					width: 338rpx;
					height: 160rpx;
					overflow: hidden;
					.bg{
						width: 100%;
						height: 100%;
					}
					.title{
						position: absolute;
						left: 22rpx;
						top: 18rpx;
						z-index: 1;
						font-weight: 500;
						font-size: 40rpx;
						color: #0F8780;
						line-height: 56rpx;
						text-align: left;
					}
					.btn{
						position: absolute;
						left: 22rpx;
						bottom: 10rpx;
						z-index: 1;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			.tab-content{
				box-sizing: border-box;
				margin-top:30rpx;
				padding: 0 24rpx;
				.desc{
					font-size: 32rpx;
					font-weight: 500;
					color: #606266;
					text-align: left;
					line-height: 38rpx;
					image{
						width: 100%;
						max-width: 702rpx;
					}
					img{
						width: 100%;
						max-width: 702rpx;
					}
				}
				.steps-wrap{
					padding-left: 20rpx; 
					.step-item{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						.num{
							width: 50rpx;
							height: 50rpx;
							font-size: 32rpx;
							font-weight: 500;
							color: #606266;
							text-align: center;
							line-height: 50rpx;
							background-color: #EAEDF1;
							border-radius: 50%;
						}
						.title{
							font-size: 32rpx;
							font-weight: 500;
							color: #606266;
							text-align: left;
							margin-left: 32rpx;
						}
					}
					.step-arrow{
						margin: 12rpx 8rpx;
					}
				}
			}
		}
	}
</style>